<template>
	<view class="page-wrap" :data-theme="theme" :style="globalColor.style">
		<header-custom title="志愿 · 分析报告" />
		<view class="container">
			<get-img className="w690 radius8" imgCode="IMG0010" />
			<get-img className="w690 mt20 radius8" imgCode="IMG0007" />

			<!-- 成绩分析 -->
			<view class="module">
				<view class="moreTitle fboxRow Ycenter">
					<view class="flex1 fboxRow fwb Ycenter font28 color-36363A">{{analysis.examName || '成绩分析'}}</view>
					<view class="more font22 color-9899A1 fboxRow Ycenter" @tap="pageTo('cjfx')">我的成绩<text
							class="bksCIcon bks-c-ziyuan19right font20"></text></view>
				</view>
				<view class="analysis mt30 fboxRow font24 color-fff">
					<view class="flex1 fboxCol Ycenter" style="margin-right:20rpx">
						<image src="https://bks-view.obs.cn-north-4.myhuaweicloud.com/css/v-2-1.jpg" mode="aspectFit">
						</image>
						<view class="content">
							<view class="tit">赋分成绩</view>
							<view class="con mt20"><text
									class="font48">{{analysis.newTotalScore !=null ? analysis.newTotalScore : '？'}}</text>
								分</view>
							<view class="info font20 mt8">
								上线批次：<text>{{analysis.onlineBatch !=null ? analysis.onlineBatch : '？'}}</text></view>
						</view>
					</view>
					<view class="flex1 fboxCol Ycenter">
						<image src="https://bks-view.obs.cn-north-4.myhuaweicloud.com/css/v-2-2.jpg" mode="aspectFit">
						</image>
						<view class="content">
							<view class="tit">全市排名</view>
							<view class="con mt20"><text
									class="font48">{{analysis.cityRank !=null ? analysis.cityRank : '？'}}</text> 名
							</view>
							<view class="info font20 mt8">
								同名次考生：<text>{{analysis.sameCityRank !=null ? analysis.sameCityRank : '？'}}</text> 名
							</view>
						</view>
					</view>
				</view>
				<view class="score-unfold" v-if="scoreList.newTotalScore">
					<view v-if="unfold" class="hd fboxRow Ycenter font26 color-36363A">
						<block  v-if="scoreList.type == 3">总分(赋)：{{scoreList.newTotalScore}}分</block>
						<block v-else>总分(原)：{{scoreList.totalScore}}分，总分(赋)：{{scoreList.newTotalScore}}分</block>
					</view>
					<view v-if="unfold" class="bd fboxWrap">
						<block v-for="(bItem, BIndex) in scoreList.scoreInfos" :key="BIndex">
							<view class="score-tag fboxCol">
								<view class="tit fboxRow Ycenter Xcenter font24 color-9899A1">
									{{bItem.subjectName}}
									<view class="fboxRow Ycenter Xcenter" v-if="bItem.fax">
										(<block v-if="scoreList.type == 3">赋</block>
										<block v-else>原 <text v-if="bItem.subjectScore"
												style="margin: 0 10rpx; font-size:20rpx;color:#C7C8D4">|</text> 赋
										</block>)
									</view>
								</view>
								<view class="con fboxRow Ycenter Xcenter font24 color-9899A1">
									<text class="fboxRow Ycenter Xcenter color-36363A" style="margin-right:20rpx">
										<block v-if="scoreList.type == 3 && bItem.fax">{{bItem.faxScore}}</block>
										<block v-else>{{bItem.subjectScore}}
											<block v-if="bItem.fax"><text
													style="margin: 0 10rpx;font-size:20rpx; color:#C7C8D4">|</text>{{bItem.faxScore}}
											</block>
										</block>
									</text>分
								</view>
							</view>
						</block>
					</view>
					<view class="ft fboxRow Ycenter Xcenter" @tap="unfoldTap">
						<text class="bksCIcon bks-c-ziyuan165zhankai color-C7C8D4 font20" :class="{'unfold':unfold}"></text>
					</view>
				</view>
			</view>

			<get-img className="w690 radius8 mt20" imgCode="IMG0005" />
			
			<!-- 分数线预测 -->
			<view class="module fractionalLine">
				<view class="moreTitle fboxRow Ycenter">
					<view class="flex1 fboxRow fwb Ycenter font28 color-36363A">分数线 -
						{{fractionalLine[swiperCur] && fractionalLine[swiperCur].subjectType == 2 ? '历史类': '物理类'}}</view>
					<view class="more font22 color-9899A1 fboxRow Ycenter" @tap="tipsClick"><text
							class="fboxRow Ycenter">{{fractionalLine[swiperCur] && fractionalLine[swiperCur].examName || '考试批次'}}</text><text
							class="bksCIcon bks-c-ziyuan39jieshi font22"></text></view>
				</view>
				<swiper style="height:250rpx" :current="swiperCur" @change='bannerChangeEnd'>
					<swiper-item v-for="(item, idx) in fractionalLine" :key="idx">
						<view class="swiper-item" :class="item" @tap="tipsClick">
							<view class="fboxRow forecast">
								<view class="flex1 fboxCol Xcenter Ycenter">
									<view class="icon"><text
											class="bksCIcon bks-c-ziyuan115benyi font60 color-00C15D"></text></view>
									<view class="con mt20 color-36363A font36">
										{{item.oneBatchScore !=null ?  item.oneBatchScore : '?'}} <text
											class="font24">分</text></view>
									<view class="tit color-9899A1 font22">特殊类</view>
								</view>
								<view class="flex1 fboxCol Xcenter Ycenter">
									<view class="icon"><text
											class="bksCIcon bks-c-ziyuan116bener color-FFBC44 font60"></text></view>
									<view class="con mt20 color-36363A font36">
										{{item.twoBatchScore !=null ?  item.twoBatchScore : '?'}} <text
											class="font24">分</text></view>
									<view class="tit color-9899A1 font22">本科批</view>
								</view>
								<view class="flex1 fboxCol Xcenter Ycenter">
									<view class="icon"><text
											class="bksCIcon bks-c-ziyuan117zhuanke color-E85531 font60"></text>
									</view>
									<view class="con mt20 color-36363A font36">
										{{item.threeBatchScore !=null ?  item.threeBatchScore : '?'}} <text
											class="font24">分</text></view>
									<view class="tit color-9899A1 font22">专科(高职）</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dots">
					<view class="dot" v-for="(item, idx) in fractionalLine" :key="idx" :class="idx == swiperCur ? 'active bg-00C15D':'bg-DFE0ED'"></view>
				</view>
			</view>
			
			<view class="fboxRow Xcenter mt20">
				<view class=" w690 fboxRow Ycenter color-fff piecewise" @tap="pageTo('piecewise')">
					<view class="flex1 font26"><text class="bksCIcon bks-c-ziyuan171yifenyiduan"
							style="margin-right:10rpx; color:#FFE063"></text>一分一段表</view>
					<view class="right font22">点击查看<text class="bksCIcon font20 bks-c-ziyuan19right"></text></view>
				</view>
			</view>
			
			<!-- 推荐院校 -->
			<view class="module">
				<view class="moreTitle fboxRow Ycenter">
					<view class="flex1 fboxRow fwb Ycenter font28 color-36363A">推荐院校: {{analysis.onlineBatch || ''}}
					</view>
					<view class="more font22 color-9899A1 fboxRow Ycenter" @tap="pageTo('tjyx', 0)">选专业，填志愿<text class="bksCIcon bks-c-ziyuan19right font20"></text></view>
				</view>
				<view class="fboxRow school mt30">
					<view class="fboxCol flex1" @tap="pageTo('tjyx', 1)">
						<image class="bg" src="https://bks-view.obs.cn-north-4.myhuaweicloud.com/css/v-3-1.jpg"
							mode="aspectFill"></image>
						<view class="tit font40" style="color:#E85531">
							{{school.sprintCount !=null ? school.sprintCount : '?'}}所</view>
						<view class="con font20" style="color:#A18781">冲刺院校</view>
					</view>
					<view class="fboxCol flex1" @tap="pageTo('tjyx', 2)">
						<image class="bg" src="https://bks-view.obs.cn-north-4.myhuaweicloud.com/css/v-3-2.jpg"
							mode="aspectFill"></image>
						<view class="tit font40" style="color:#FFBC44">
							{{school.safeCount !=null ? school.safeCount : '?'}}所</view>
						<view class="con font20" style="color:#A19581">稳妥院校</view>
					</view>
					<view class="fboxCol flex1" @tap="pageTo('tjyx', 3)">
						<image class="bg" src="https://bks-view.obs.cn-north-4.myhuaweicloud.com/css/v-3-3.jpg"
							mode="aspectFill"></image>
						<view class="tit font40" style="color:#00C15D">
							{{school.floorsCount !=null ?  school.floorsCount : '?'}}所</view>
						<view class="con font20" style="color:#81A190">保底院校</view>
					</view>
				</view>
			</view>
			
			<!--IMG0006-->
			<get-img className="w690 radius8 mt20" imgCode="IMG0006" />
			<!-- 模拟志愿 -->
			<view class="module">
				<view class="moreTitle fboxRow Ycenter">
					<view class="flex1 fboxRow fwb Ycenter font28 color-36363A">模拟志愿: {{analysis.onlineBatch || ''}}
					</view>
					<view class="more font22 color-9899A1 fboxRow Ycenter" @tap="pageTo('mlzy')">我的志愿<text
							class="bksCIcon bks-c-ziyuan19right font20"></text></view>
				</view>
				<view class="fboxCol Xcenter mt30">
					<view class="fboxCol Xcenter Ycenter">
						<canvas-meter :percent="school.acceptanceRate" />
					</view>
					<view class="fboxRow Yend Xcenter color-36363A font24 mt30" @tap="pageTo('mlzy')">我的志愿：
					<view>{{school.volunteerCount !=null ?  school.volunteerCount : '?'}}</view> 个</view>
				</view>
			</view>
		</view>
		<!-- 促销弹框 -->
		<vip-dialog :showOverlay.sync="showPOP" :isPromotion="true" ident="POP0003" />
		<!-- 购买VIP弹窗 -->
		<vip-dialog :showOverlay.sync="showVipDialog"  @click="onVipClick" />
		<BottomTabbar type="bks" active="volunteer" />
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import GetImg from '@/pagesBKS/components/get-img.vue';
	import VipDialog from '@/pagesBKS/components/vip-dialog.vue';
	import BottomTabbar from '@/components/bottom-btn/bottom-tabbar.vue'
	import { bksFunctionInfo } from '@/api/bks.index.js'
	import { getBksInfo } from '@/static/js/bks.common.js'
	import {scoreGrades, volunteerForecast, recommendSchool} from '@/api/bks.volunteer'
	import CanvasMeter from './canvas-meter.vue'
	export default {
		components: {
			headerCustom,
			GetImg,
			CanvasMeter,
			VipDialog,
			BottomTabbar
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				analysis: {
					cityRank: null,
					newTotalScore: null,
					onlineBatch: null,
					sameCityRank: null,
				},
				school: {
					"acceptanceRate": null,
					"floorsCount": null,
					"safeCount": null,
					"sprintCount": null,
					"volunteerCount": null
				},
				fractionalLine: [{
					examId: "",
					examName: null,
					oneBatchScore: null,
					threeBatchScore: null,
					twoBatchScore: null
				}],
				showPOP: false,
				pageToStatus: [1], // 1 正常跳转 2 不是VIP 3 没有登录 4 未录入成绩
				showVipDialog: false,
				swiperCur: 0,
				filterList: [{
						id: 'chinese',
						subId: '',
						subjectName: '语文',
						on: true,
						max: 150,
						subjectScore: '',
						fax: false,
						faxScore: ''
					},
					{
						id: 'mathematics',
						subId: '',
						subjectName: '数学',
						on: true,
						max: 150,
						subjectScore: '',
						fax: false,
						faxScore: ''
					},
					{
						id: 'english',
						subId: '',
						subjectName: '外语',
						on: true,
						max: 150,
						subjectScore: '',
						fax: false,
						faxScore: ''
					},
					{
						id: 'physical',
						subId: '',
						subjectName: '物理',
						max: 100,
						subjectScore: '',
						fax: false,
						faxScore: ''
					},
					{
						id: 'history',
						subId: '',
						subjectName: '历史',
						max: 100,
						subjectScore: '',
						fax: false,
						faxScore: ''
					},
					{
						id: 'biological',
						subId: 'newBiological',
						subjectName: '生物学',
						max: 100,
						subjectScore: '',
						fax: false,
						faxScore: ''
					},
					{
						id: 'chemical',
						subId: 'newChemical',
						subjectName: '化学',
						max: 100,
						subjectScore: '',
						fax: false,
						faxScore: ''
					},
					{
						id: 'political',
						subId: 'newPolitical',
						subjectName: '思政',
						max: 100,
						subjectScore: '',
						fax: false,
						faxScore: ''
					},
					{
						id: 'geographic',
						subId: 'newGeographic',
						subjectName: '地理',
						max: 100,
						subjectScore: '',
						fax: false,
						faxScore: ''
					},
				],
				scoreList: {
					"scoreInfos": [
						// {
						//   "cityRank": 0,
						//   "classRank": 0,
						//   "districtRank": 0,
						//   "schoolRank": 0,
						//   "subjectId": "",
						//   "subjectName": "语文",
						//   "subjectScore": 0,
						//   "type": "1"
						// }
					],
					"original": "612",
					"assigned": "634"
				},
				unfold: false,
				TIP0002: null,
				TIP0003: null,
				isHighExam: false,
				getInfoList: ['TIP0002', 'TIP0003']
			}
		},
		onLoad(options) {},
		onShow() {
			this.pageToStatus = [1]
			let bw_bks_params = uni.getStorageSync('bw_bks_params')
			if (bw_bks_params && bw_bks_params.access_token) {
				this.requset(2)
			} else {
				this.pageToStatus.push(3)
			}
			// 获取banner 图片
			this.getFunctionInfo()
		},
		methods: {
			getFunctionInfo() {
				this.getInfoList.filter(identify => {
					console.log(identify)
					bksFunctionInfo({
						identify
					}).then(res => {
						if (identify == 'TIP0002' || identify == 'TIP0003') {
							this[identify] = res.data && res.data.briefIntroduction || null
						}
					})
				})
			},
			onVipClick() {
				this.userInfo.isVIP = true
			},
			requset(number) {
				scoreGrades({
					examId: ''
				}).then(res => {
					if (res.data.onlineBatch == '本科二批') {
						res.data.onlineBatch = '本科批'
					} else if (res.data.onlineBatch == '本科一批') {
						res.data.onlineBatch = '特殊类'
					} else if (res.data.onlineBatch == '高职') {
						res.data.onlineBatch = '专科批'
					}
					// 没有进行成绩分析将不再进行推荐学校请求
					if(res.data.onlineBatch && res.data.id){
						this.getRecommendSchool(res.data.onlineBatch, res.data.id)
					}
					this.analysis = res.data
					if (res.data.category == 2) {
						this.swiperCur = 1
					} else {
						this.swiperCur = 0
					}
					this.initScore(res.data)
				}).catch(err => {
					this.analysis= {
						cityRank: null,
						newTotalScore: null,
						onlineBatch: null,
						sameCityRank: null,
					}
				})
				volunteerForecast().then(res => {
					if (res.data) {
						this.fractionalLine = res.data.list
						this.isHighExam = res.data.isHighExam
					}
				})
			},
			getRecommendSchool(name, id) {
				recommendSchool({
					batchName: name,
					examAnalysisId: id
				}).then(res => {
					this.school = res.data
				}).catch(err => {
					if (err.code == 300533) {
						this.pageToStatus.push(4)
						this.school = {
							"acceptanceRate": null,
							"floorsCount": null,
							"safeCount": null,
							"sprintCount": null,
							"volunteerCount": null
						}
					} else {
						this.showPOP = false
					}
				})
			},
			initScore(data) {
				const {
					filterList
				} = this
				const dataList = {
					...data,
					scoreInfos: []
				}
				for (let i in data) {
					if (data[i] != 'null' && data[i] != null) {
						filterList.filter(item => {
							if (item.id == i) {
								item.subjectScore = data[i]
								dataList.scoreInfos.push(item)
							} else if (item.subId == i) {
								item.faxScore = data[i]
								item.fax = true
								if (data.type == 3) {
									// item.subjectScore = data[i]
									dataList.scoreInfos.push(item)
								}
							}
						})
					}
				}
				this.scoreList = dataList
			},
			unfoldTap(e) {
				this.unfold= !this.unfold
			},
			bannerChangeEnd(e) {
				this.swiperCur = e.detail.current
			},
			// 页面跳转
			pageTo(tag, tab) {
				const { pageToStatus } = this
				const bw_bks_params = uni.getStorageSync('bw_bks_params')
				if (tag == 'cjfx') {
					this.$pageTo('/bks/volunteer/myScore/assign/index')
				} else if (tag == 'piecewise') {
					if (bw_bks_params && bw_bks_params.access_token) {
						this.$pageTo('/bks/volunteer/myScore/piecewise/index', {
							examId: this.fractionalLine[0].examId,
							isHighExam: this.isHighExam
						})
					} else {
						this.$pageTo('/bks/login/index/index')
					}
				} else {
					getBksInfo('isVip').then(data=>{
						console.log(data)
							// this.showVipDialog = true
							// return
						if (!data.isVip) {
							this.showVipDialog = true
							// this.$pageTo('/bks/mine/vip/index')
						} else {
							if (pageToStatus.indexOf(4) != -1 && data.bw_bks_params.access_token && tag != 'expertConsult') {
								this.$pageTo('/bks/volunteer/myScore/assign/index')
							} else if (data.bw_bks_params.access_token) {
								if (tag == 'mlzy') {
									this.$pageTo('/bks/volunteer/mockVolunteer/index')
								} else if (tag == 'tjyx') {
									this.$pageTo('/bks/volunteer/academy/index', {
										activeTab: tab,
										examAnalysisId: this.analysis.id
									})
								} else if (tag == 'expertConsult') {
									uni.showToast({
										title: '即将上线，敬请关注',
										icon: 'none'
									})
								}
							}
						}
					})
				}
			},
			onClickHide() {
				this.showPOP = false
			},
			// 提示
			tipsClick() {
				uni.showModal({
					showCancel: false,
					confirmColor: '#00C15D',
					content: this.isHighExam ? this.TIP0003 : this.TIP0002,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 24rpx 0;
	}

	.module {
		padding: 30rpx 30rpx 0;
	}

	.moreTitle {
		height: 44rpx;
		line-height: 44rpx;
	}

	.moreTitle .tit {
		margin-top: 10rpx;
	}

	.moreTitle .bksCIcon {
		margin-left: 4rpx;
	}

	.banner {
		width: 690rpx;
		height: 143rpx;
	}

	.fractionalLine {
		position: relative;
	}

	.fractionalLine .dots {
		display: flex;
		justify-content: center;
		z-index: 6;
	}

	.fractionalLine .dot {
		margin: 0 8rpx;
		width: 14rpx;
		height: 14rpx;
		border-radius: 8rpx;
		transition: all .6s;
	}

	.fractionalLine .dot.active {
		width: 30rpx;
	}

	.newsMsg {
		position: relative;
		padding: 0 80rpx 0 30rpx;
		width: 750rpx;
		line-height: 80rpx;
		height: 80rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.newsMsg .bksCIcon {
		margin-right: 10rpx;
	}

	.mt20 {
		margin-top: 20rpx;
	}

	.mt30 {
		margin-top: 30rpx;
	}

	.school .fboxCol {
		position: relative;
		margin-left: 30rpx;
		padding: 20rpx 30rpx 0;
		height: 140rpx;
	}

	.school .fboxCol:first-child {
		margin-left: 0;
	}

	.school .tit {
		position: relative;
		z-index: 2;
	}

	.school .con {
		position: relative;
		margin-top: 15rpx;
		z-index: 2;
	}

	.school .bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 140rpx;
		border-radius: 10rpx;
		z-index: 0;
	}

	.forecast {
		margin-top: 60rpx;
	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.wrapper .bg {
		width: 630rpx;
		height: 723rpx;
	}

	.wrapper .btn {
		position: absolute;
		left: 50%;
		bottom: 80rpx;
		margin: 0 0 0 -180rpx;
		width: 360rpx;
		height: 76rpx;
		background: linear-gradient(180deg, #FAA40F, #FFCE7A);
		border-radius: 38rpx;
		z-index: 3;
	}


	/* 成绩分析 */
	.analysis image {
		position: relative;
		width: 335rpx;
		height: 182rpx;
		border-radius: 12rpx;
		overflow: hidden;
		z-index: 0;
	}

	.analysis .xxzl {
		margin-right: 20rpx;
	}

	.analysis .flex1 {
		position: relative;
	}

	.analysis .content {
		position: absolute;
		left: 30rpx;
		top: 24rpx;
		z-index: 2;
	}

	.analysis .con {
		// margin-top: 10rpx;
		color: #FFF833
	}


	/* 展开成绩 */
	.score-unfold {
		margin-top: 10rpx;
	}

	.score-unfold .hd {
		height: 66rpx;
		border-bottom: 1px dashed #E8EAEB;
	}

	.score-unfold .bd {
		padding: 10rpx 0 0;
	}

	.score-unfold .ft {
		height: 66rpx;
	}

	.score-unfold .ft .bksCIcon {
		transform: rotate(0deg);
		transition: transform .3s;
	}

	.score-unfold .ft .bksCIcon.unfold {
		transform: rotate(180deg);
	}

	.score-unfold .score-tag {
		padding: 15rpx 0;
		width: 230rpx;
	}

	.score-unfold .score-tag .con {
		margin-top: 20rpx;
	}

	.piecewise {
		padding: 0 30rpx;
		height: 88rpx;
		background: #FFA96A url(https://bks-view.obs.myhuaweicloud.com:443/css/v_03.jpg) no-repeat top center;
		border-radius: 8rpx;
	}
</style>